<template>
  <div class="header-search">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="6" v-if="!isMobile">
          <img src="@/assets/imgs/logo.png" class="logo" />
        </el-col>
        <el-col :span="isMobile ? 24 : 12">
          <search-links />
          <search-module ref="searchModuleRef" />
          <search-hot-module @search="search" />
        </el-col>
        <el-col :span="6" v-if="!isMobile">
          <div class="setting">
            <el-link href="/simpleRand" :underline="false" target="_blank" title="随机化">
              <img src="/rand_favicon.ico" class="rand_logo" alt="rand_logo">
            </el-link>
            <el-link href="/dictionary" :underline="false" target="_blank" title="临床字典">
              <img src="/dictionary_icon.svg" class="dictionary_logo" alt="dictionary_logo">
            </el-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SearchHotModule from '@/components/header-search/SearchHotModule.vue'
import SearchLinks from '@/components/header-search/SearchLinks.vue'
import SearchModule from '@/components/header-search/SearchModule.vue'
import { ref } from 'vue'

const isMobile = window.isMobile
const searchModuleRef = ref<InstanceType<typeof SearchModule>>()
const search = (word: string) => {
  searchModuleRef.value!.search(word)
}
</script>

<style lang="scss" scoped>
.header-search {
  height: 110px;
  background-color: #ffffff;
  box-shadow: 0px 0px 20px #cccccc;

  .container {
    max-width: 1190px;
    min-width: 980px;
    margin: 0 auto;

    .logo {
      height: 55px;
      margin-top: 25px;
      float: right;
    }

    .setting {
      margin-top: 30px;

      .el-link {
        margin-right: 15px;
      }

      .rand_logo {
        width: 32px;
        height: 32px;
      }

      .dictionary_logo {
        width: 36px;
        height: 36px;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .header-search {
    .container {
      min-width: calc(100% - 10px);
      margin: 0 5px;
    }
  }
}
</style>
